<div class="wrapper" >
    <div #cardBody class="abs-center mt-lg width-lg">
        <nz-card [nzTitle]="nzTitle" [nzBordered]="false" class="ant-card__primary ant-card__title-img">
            <ng-template #nzTitle>
                <div class="text-center" style="color:white; font-weight:bold;"><img src="./assets/img/logo.svg" style="height:20px;"> {{l("LogIn")}}</div>
            </ng-template>
            <form nz-form [formGroup]="valForm" #loginForm="ngForm" method="post" id="LoginForm" (ngSubmit)="login()" role="form">
                <div nz-form-item>
                    <div nz-form-control [nzValidateStatus]="valForm.controls.userNameOrEmailAddress">
                        <nz-input formControlName="userNameOrEmailAddress" [nzPlaceHolder]="l('UserNameOrEmail')" [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" [nzSize]="'large'">
                            <ng-template #suffix>
                                <i class="anticon anticon-user"></i>
                            </ng-template>
                        </nz-input>
                        <div nz-form-explain *ngIf="valForm.controls.userNameOrEmailAddress.dirty&&valForm.controls.userNameOrEmailAddress.hasError('required')">请输入用户名或邮箱地址</div>
                    </div>
                </div>
                <div nz-form-item>
                    <div nz-form-control [nzValidateStatus]="valForm.controls.password">
                        <nz-input formControlName="password" [(ngModel)]="loginService.authenticateModel.password" [nzPlaceHolder]="'密码'" [nzType]="'password'" [nzSize]="'large'">
                            <ng-template #suffix>
                                <i class="anticon anticon-lock"></i>
                            </ng-template>
                        </nz-input>
                        <div nz-form-explain *ngIf="valForm.controls.password.dirty&&valForm.controls.password.hasError('required')">密码必填</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-col [nzSpan]="12">
                        <label nz-checkbox [(ngModel)]="loginService.rememberMe" formControlName="rememberMe">
                            <span>{{l("RememberMe")}}</span>
                        </label>
                    </div>
                    <div nz-col [nzSpan]="12" class="text-right">
                        <a [routerLink]="['../register']" >{{l("Register")}}</a>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-col [nzSpan]="24">
                        <button nz-button id="LoginButton" type="submit" [disabled]="!valForm.valid" [nzType]="'primary'" [nzSize]="'large'" class="ant-btn__block">
                            <span>登录</span>
                        </button>
                    </div>
                </div>
            </form>
        </nz-card>    
    </div>
</div>
